<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Websocket Client</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .box-row {
            display: flex;
            flex-direction: row;
        }

        .box-col {
            display: flex;
            flex-direction: column;
        }

        main {
            margin-top: 10px;
        }

        .connect {
            margin-bottom: 10px;
            height: 30px;
        }

        .receiver {
            margin-top: 10px;
            margin-bottom: 10px;
            width: 800px;
            height: 500px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
<main class="box-col">
    <div class="box-col receiver" id="receiver">
        <div id='msgList'></div>
    </div>
    <div class="box-row connect">
        <input id="host" placeholder="host:port" value="127.0.0.1:5455">
        <input id="uid" placeholder="uid" value="100">
        <input id="heartSec" placeholder="heart beat sec" value="10000">
        <button onclick="connectWs()">连接</button>
        <button onclick="closeWs()">关闭</button>
        <button onclick="stopTask()">关闭心跳</button>
    </div>
    <div class="box-row connect">
        <input type="number" id="userId" placeholder="uid"/>
        <textarea id="msg" placeholder="msg"></textarea>
        <button onclick="sendMsg()">发送</button>
    </div>
</main>

</body>

<script>
    var ws = null;
    var heartTask = null;

    function now() {
        let d = new Date();
        return `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}.${d.getMilliseconds()}`;
    }

    function connectWs() {
        let host = document.getElementById("host").value
        let uid = document.getElementById('uid').value;
        ws = new WebSocket("ws://" + host + "/ws?uid=" + uid + "&token=" + uid);
        ws.onopen = function () {
            ws.send("hello");
            startTask();
        };

        ws.onmessage = function (evt) {
            // console.log(evt.data)
            let div = document.createElement("div");
            // div.setAttribute('className', 'box-row')

            div.innerText = now() + ': ' + evt.data;
            let list = document.getElementById('msgList');
            list.appendChild(div)
            document.getElementById('receiver').scrollTop = list.clientHeight;
        };

        ws.onclose = function (evt) {
            console.log("error");
        };

        ws.onerror = function (evt) {
            console.log("error");
        };
    }

    function closeWs() {
        if (ws) {
            ws.close()
        }
    }


    function startTask() {
        let heartSec = document.getElementById("heartSec").value
        if (!heartSec || heartSec === "0") {
            return;
        }
        let x = 0
        heartTask = setInterval(function () {
            x++;
            ws.send('ping' + x)
        }, heartSec)
    }

    function stopTask() {
        clearInterval(heartTask)
        heartTask = null;
    }

    function sendMsg() {
        let userId = document.getElementById('userId').value;
        let msg = document.getElementById('msg').value;
        get('http://192.168.16.214:5454/msg/send?userId=' + userId + '&msg=' + msg, function (data) {
        }, function (data) {
        })
    }

    function get(url, successFuc, failFunc) {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        // xhr.setRequestHeader("Connection", "close");
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                if (successFuc) {
                    successFuc(xhr.responseText);
                }
            } else {
                if (failFunc) {
                    failFunc(xhr.responseText);
                }
            }
        };
    }
</script>

</html>